<template>
  <div id="itIsLive">
    <!--面包屑导航-->
    <div class="breadcrumbBox clearFloat">
      <div class="lf">当前位置：</div>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="lf">
        <!--<el-breadcrumb-item :to="{ path: '/' }">直播课程</el-breadcrumb-item>-->
        <el-breadcrumb-item>直播详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--标题等-->
    <div class="titleBox">
      <p>{{info.liveName}}</p>
      <div class="otherList clearFloat">
        <div class="lf coinDiv">
          <i class="el-icon-coin lf"></i>
          <span class="lf">{{info.integral}}积分</span>
        </div>
        <div class="lf timeDiv">
          <span>{{info.liveTime}}</span>
        </div>
        <div class="lf viewDiv">
          <i class="el-icon-s-custom lf"></i>
          <span class="lf">{{info.pageViews}}</span>
        </div>
      </div>
    </div>
    <!--正在直播详情-->
    <!--<img src="@/assets/images/home/tu4.png" alt="">-->
    <video autoplay id="videL" :src="$store.state.prefixImg + info.liveFilePath" controls="controls"></video>
    <!--左侧直播介绍、互动区-->
    <div class="lf leftPart">
      <div class="liveIntroduction">
        <div class="titleDiv">
          <p>直播介绍</p>
        </div>
        <div class="contentDiv">{{info.liveInfo}}</div>
      </div>
      <div class="interactionArea">
        <div class="titleDiv">
          <p>互动区</p>
        </div>
        <div class="contentDiv">
          <div class="inputDiv">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入您的评论"
              v-model="textarea">
            </el-input>
            <el-button class="myBtn" type="primary" @click="getNote">提交评论</el-button>
          </div>
          <!--评论和回复区域-->
          <div class="discussAndReplyDiv">
            <template v-for="(item,index) in interactionAreaData">
              <div class="itemDiv clearFloat" :key="index">
                <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="lf"></el-avatar>
                <div class="lf">
                  <div class="discussBox">
                    <p class="commonNameP">{{userName}}</p>
                    <p class="commonContentP">{{item.comment}}</p>
                    <div class="clearFloat commonTimeDiv">
                      <span class="lf">{{item.createTime}}</span>
                    </div>
                  </div>
                  <template v-for="item1 in replyList" v-if="item.commentId==item1.commentId">
                    <div class="replyBox clearFloat">
                      <el-avatar :size="40" :src="circleUrl1" class="lf"></el-avatar>
                      <div class="lf">
                        <div class="clearFloat">
                          <p class="commonNameP lf">管理员</p>
                          <span class="lf txtSpan">回复</span>
                          <p class="commonNameP lf">您</p>
                        </div>
                        <p class="commonContentP">
                          {{item1.comment}}
                        </p>
                        <div class="clearFloat commonTimeDiv">
                          <span class="lf">{{item1.createTime}}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <div class="lineDiv" :style="{marginBottom:index!=interactionAreaData.length-1?'36px':'8px'}"></div>
            </template>
          </div>
          <!--底部按钮-->
          <div class="bottomDiv clearFloat">
            <div class="rf">
              <p class="lf">已加载完全部评论</p>
              <!--<el-button class="ljplBtn lf">立即评论</el-button>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--右侧讲师介绍-->
    <div class="lf rightPart">
      <div class="titleDiv">
        <p>讲师介绍</p>
      </div>
      <div class="contentDiv">
        <div class="imgDiv">
          <el-avatar :size="61" :src="circleUrl1" style="vertical-align: middle"></el-avatar>
          <p>{{info.liveTeacherName}}</p>
        </div>
        <p class="txtP">{{info.liveTeacherInfo}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {liveQueryOne,liveComment,liveCommentinsert,queryWatchRecord} from '@/request/api'
  import { formatDate ,getPageViews,updateEachPeriods,insertIntegrals,oneWatchRecord} from '@/utils'
  export default {
    name: 'itIsLive',
    data () {
      return {
        info: {},
        textarea: '',
        circleUrl1:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        interactionAreaData:[],
        replyList:[],
        userName: ''
      }
    },
    created() {
        this.getInfo()
      this.userName = JSON.parse(localStorage.getItem('userInfo')).userName
    },
    mounted() {
//      1分钟后浏览量加一
      setTimeout(e=> {
        getPageViews(this.info,1)
      },60000)
    },
    methods: {
//        直播详情
        getInfo() {
          const loading = this.openLoading();
          liveQueryOne(this.$route.params.id).then(res=> {
            loading.close();
              if(res.code == 200) {
                this.info = res.data
                this.getinteractionAreaData()
                this.videoEvent()

                //        查询是否为第一次看
                var params1 = {
                  "companyUserId": JSON.parse(localStorage.getItem('userInfo')).id,
                  "id": '',
                  "time": "",
                  "type": 0,
                  "watchId": this.$route.params.id
                }
                queryWatchRecord(params1).then(res=> {
                  if (res.code == 200) {
//                第一次查看,插入记录
                    if (res.data.length == 0) {
                      oneWatchRecord(this.info, 0)
                    }
                  }
                })

              }else {
                this.$message({
                  message: res.msg,
                  type: 'warning',
                  offset: '500'
                });
              }
          }).catch(() => {
            loading.close();
          })
        },
      //      视频播放触发事件
      videoEvent() {
        var that = this
        // 视频当前播放事件发生变化 触发事件
        var video=document.getElementById('videL')
        var last = 0;
        video.addEventListener("timeupdate",function(){
          if(this.currentTime - last > 2) {
            this.currentTime = last;
          } else {
            last = this.currentTime;
          }
//          this.section = timeToMinute(timers);
//          console.log('this.section:' + that.section);
        })
        // 视频结束触发得事件
        video.addEventListener("ended",function(){
          that.type = 1
          that.uplodeView()
        })
      },
//      加积分、学时
      uplodeView() {
        if(JSON.parse(localStorage.getItem('userInfo')).integral != null) {
          var period = Number(JSON.parse(localStorage.getItem('userInfo')).integral) + Number(this.info.integral)
          insertIntegrals(period,this.$route.params.id,this.info.courseName,0)
        }else {
          insertIntegrals(Number(this.info.integral),this.$route.params.id,this.info.courseName,0)
        }
        //            学时更新
        if(JSON.parse(localStorage.getItem('userInfo')).period != null) {
          var period = Number(JSON.parse(localStorage.getItem('userInfo')).period) + Number(this.info.period)
          updateEachPeriods(period)
        }else {
          updateEachPeriods(Number(this.info.period))
        }
      },
//      查询互动列表
      getinteractionAreaData() {
        const loading = this.openLoading();
        const params = {
          "comment": "",
            "companyUserId": JSON.parse(localStorage.getItem('userInfo')).id,
            "createTime": "",
            "id": '',
            "liveId": this.$route.params.id,
          "answerId": '',
          "commentId": '',
          "userId": this.info.creater,
          "userName": this.info.createrName,
        }
        liveComment(params).then(res=> {
          loading.close();
          if(res.code == 200) {
            this.interactionAreaData = []
            this.replyList = []
            res.data.forEach(item=> {
                if(item.answerId == '' || item.answerId == null) {
                  this.interactionAreaData.push(item)
                }else {
                  this.replyList.push(item)
                }
            })
          }else {
            this.$message({
              message: res.msg,
              type: 'warning',
              offset: '500'
            });
          }
        }).catch(() => {
          loading.close();
        })
      },
      //      写评论
      getNote() {
        if(this.textarea != '') {
          const loading = this.openLoading();
          var params = {
            "comment": this.textarea,
            "companyUserId": JSON.parse(localStorage.getItem('userInfo')).id,
            "id": '',
            "liveId":this.$route.params.id,
            "answerId": '',
            "commentId": '',
//            "createTime": "",
          }
          liveCommentinsert(params).then(res=> {
            loading.close();
            if(res.code == 200) {
              this.$message({
                message: '提交成功',
                type: 'success',
                offset: '500'
              });
              this.textarea = ''
              this.getinteractionAreaData()
            }else {
              this.$message({
                message: res.msg,
                type: 'warning',
                offset: '500'
              });
            }
          }).catch(() => {
            loading.close();
          })
        }else {
          this.$message({
            message: '请输入笔记',
            type: 'warning',
            offset: '500'
          });
        }
      },
//      toPath() {
//        this.$router.push({
//          name:'startExam'
//        })
//      }
    }
  }
</script>

<style scoped>
  #itIsLive {
    padding-top:30px;
    box-sizing: border-box;
  }
  video {
    width: 100%;
    height: 576px;
    margin-bottom:40px;
  }
  /*p {
    text-indent: 2em;
  }*/
  .curriculum-bottom {
    font-size: 16px;
    color: #8a8a8a;
  }
  .curriculum-bottom img {
    width: 15px;
    height: 15px;
  }

  .breadcrumbBox{
    margin-bottom:12px;
  }
  .breadcrumbBox div,.breadcrumbBox /deep/ .el-breadcrumb__inner{
    color:#999;
    font-size:16px;
    font-weight:normal;
    line-height: 20px;
  }
  .breadcrumbBox /deep/ .el-breadcrumb__separator[class*=icon]{
    margin:0;
  }

  p{
    margin:0;
  }
  .titleBox p{
    font-size: 32px;
    font-weight: bold;
    color: #333333;
    margin-bottom:36px;
  }
  .otherList{
    width:100%;
    height:22px;
    margin-bottom:35px;
  }
  .otherList span{
    line-height:22px;
    font-size: 16px;
    color:#999;
  }
  .coinDiv,.coinDiv span{
    color: #22944E;
  }
  .coinDiv span,.viewDiv span{
    margin-left:20px;
  }
  .coinDiv /deep/ .el-icon-coin,.viewDiv /deep/ .el-icon-s-custom{
    position: relative;
    top: 1px;
    font-size: 18px;
  }
  .viewDiv /deep/ .el-icon-s-custom{
    color:#999;
  }
  .timeDiv{
    position: relative;
    padding: 0 29px;
    margin:0 29px;
  }
  .timeDiv:before,.timeDiv:after{
    content:"";
    position: absolute;
    width:1px;
    height:15px;
    background:#999;
    top:3px;
  }
  .timeDiv:before{
    left:0;
  }
  .timeDiv:after{
    right:0;
  }

  .leftPart{
    width:900px;
    margin-right:20px;
  }
  .leftPart .liveIntroduction{
    width:900px;
    min-height:270px;
    box-shadow: 0 0 12px 0 rgba(78, 99, 86, 0.2);
    margin-bottom:20px;
  }
  .leftPart .liveIntroduction .contentDiv{
    padding:39px 30px 0 30px;
    box-sizing: border-box;
    font-size:16px;
    color:#666;
    line-height: 30px;
  }
  .leftPart .interactionArea{
    width: 900px;
    background: #FFF;
    box-shadow: 0 0 12px 0 rgba(78, 99, 86, 0.2);
    margin-bottom:60px;
  }
  .leftPart .interactionArea .contentDiv{
    padding:30px 30px 0 30px;
    box-sizing: border-box;
  }
  .leftPart .interactionArea /deep/ .el-textarea__inner{
    resize: none;
    background: #F7F8FA;
    border: 1px solid #E5E5E5;
  }
  .leftPart .interactionArea .myBtn{
    width:160px;
    height:52px;
    margin: 20px auto 0;
    background: #22944E;
    border-color: #22944E;
    font-size: 16px;
    font-weight: 700;
  }
  .leftPart .interactionArea .inputDiv{
    margin-bottom:46px;
  }
  .rightPart{
    width:280px;
    height:351px;
    box-shadow: 0 0 12px 0 rgba(78, 99, 86, 0.2);
  }
  .titleDiv{
    width:100%;
    height:80px;
    border-bottom:1px solid #E5E5E5;
  }
  .titleDiv p{
    font-size:24px;
    color:#333;
    font-weight: bold;
    height:80px;
    line-height:80px;
    padding-left:54px;
    box-sizing: border-box;
    position: relative;
  }
  .titleDiv p:before{
    content: "";
    position: absolute;
    width: 4px;
    height: 28px;
    background: #22944E;
    top: 25px;
    left: 20px;
  }
  .rightPart .contentDiv{
    text-align: center;
  }
  .imgDiv{
    margin:20px 0;
  }
  .imgDiv p{
    margin-top:20px;
    font-size: 20px;
  }
  .txtP{
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 30px;
    padding:0 42px 0 30px;
    box-sizing: border-box;
    text-align: left;
  }

  .discussAndReplyDiv /deep/ .el-avatar,.replyBox /deep/ .el-avatar{
    margin-right:16px;
  }
  .discussAndReplyDiv .itemDiv>div,.replyBox>div{
    width:calc( 100% - 56px );
  }
  .lineDiv{
    width: 900px;
    height: 1px;
    background: #E5E5E5;
    position: relative;
    left:-30px;
    margin:20px 0 36px 0;
  }
  .commonNameP{
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    margin-bottom:16px;
  }
  .commonContentP{
    font-size: 16px;
    color: #666666;
    margin-bottom:16px;
  }
  .commonTimeDiv span,.commonTimeDiv div{
    font-size: 14px;
    line-height: 14px;
  }
  .commonTimeDiv span{
    color: #999;
    margin-right:40px;
  }
  .commonTimeDiv div{
    color: #22944E;
    cursor:pointer;
  }
  .replyBox{
    margin:24px 0 0 0;
  }
  .txtSpan{
    font-size:18px;
    color:#999;
    margin:0 8px;
  }
  .bottomDiv p{
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height:36px;
    margin-bottom:8px;
  }
  .ljplBtn{
    margin-left:12px;
    width:88px;
    height:36px;
    padding:0;
    color: #22944E;
    border: 1px solid #22944E;
  }
</style>
